<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 布局- 表单布局</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  .InputAddOn{width: 300px; height: 25px;}
  .InputAddOn{margin: 20px;}
  .InputAddOn-item{display: block; background: #ccc; line-height: 1.5; text-align: center; line-height: 25px;}
  .InputAddOn-item,.InputAddOn-item{width: 60px;}
  .InputAddOn {display: flex; }
  .InputAddOn-field {flex: 1; }
  </style>
</head>

<body>
<body >
  <div class="InputAddOn">
    <span class="InputAddOn-item">头部</span>
    <input class="InputAddOn-field" placeholder="输入框">
    <button class="InputAddOn-item">尾部</button>
  </div>

  <div class="InputAddOn">
    <span class="InputAddOn-item">头部</span>
    <input class="InputAddOn-field" placeholder="输入框">
  </div>

  <div class="InputAddOn">
    <input class="InputAddOn-field" placeholder="输入框">
    <button class="InputAddOn-item">尾部</button>
  </div>

</body>

</body>

</html>
